import React from 'react'
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import { Grid, Typography } from '@material-ui/core';
import { Image } from 'components/atoms';
import cd from "assets/images/cd.png"
import { AlbumsPlay } from 'components/albumsPlay';

import { useSelector } from 'react-redux'

const useStyles = makeStyles(theme => ({
    root: {
        width: "100%",
        height: "calc(100vh - 64px)",
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        padding: "0 5%",
        [theme.breakpoints.up('md')]: {
            padding: "0 10%",
        },
    },
    mediaWrap: {
        position: "relative",
        height: "250px",
        width: "400px",
        [theme.breakpoints.up('md')]: {

        },
        [theme.breakpoints.up('lg')]: {
            width: "400px",
        },
    },
    backMedia: {
        position: "absolute",
        top: 0,
        right: 0,
        height: "100%",
        minWidth: "250px",
    },
    frameImage: {
        position: "absolute",
        top: 0,
        left: 0,
        height: "100%",
        width: "280px",
    },
    img: {
        objectFit: "cover"
    },
    itemContent: {
        marginBottom:"50px"
    },
    entryTitle: {
        fontSize:"32px",
        lineHeight:"1.2",
        margin:"15px 0 30px"
    },
    grey: {

    },
}));

function Plays() {

    const classes = useStyles();

    const playsData = useSelector((state) => state.plays.plays)
    console.log('ttttttt',playsData)
    return (
        <div className={classes.root}>
            <Grid container>
                <Grid item xs={12} sm={7} md={5}>
                    <div className={classes.mediaWrap}>
                        <div className={classes.backMedia}>
                            <Image
                                src={cd}
                                alt={cd}
                                srcSet={cd}
                                lazyProps={{ width: '100%', height: '100%' }}
                                className={classes.img}
                            />
                        </div>
                        <div className={classes.frameImage}>
                            <Image
                                src={playsData?.album_art}
                                alt={playsData?.album_art}
                                srcSet={playsData?.album_art}
                                lazyProps={{ width: '100%', height: '100%' }}
                                className={classes.img}
                            />
                        </div>
                    </div>
                    <div className={classes.itemContent}>
                        <h3 className={classes.entryTitle}> I'm Your Dreams Just Like</h3>
                        <p>
                            <span className={classes.grey}>Released:</span> 13/09/2017 <br /> <span className={classes.grey}>Label:</span> I am the Best, RED <br /> <span className={classes.grey}>Format:</span> Digital download, CD <br /> <span className={classes.grey}>Certifications:</span> RIAA: Gold
                        </p>
                    </div>
                </Grid>
                <Grid item xs={12} md={7}>
                    <AlbumsPlay musicInfoList={[playsData]} />
                </Grid>
            </Grid>
        </div>
    )
}

Plays.propTypes = {
    /**
     * External classes
     */
    className: PropTypes.string,
};

export default Plays

